<template>
    <div :class="in_array(type,['multitreeselect','imageupload'])?'dx-ctrl':''">
        <dx-text v-if="type=='text'" :value="value" :codeType="codeType" :disabled="disabled" :type="type" :condition="condition"></dx-text>
        <dx-select v-if="type=='select'" @change="change" v-model="model" :codeType="codeType" :disabled="disabled" :disabledKeys="disabledKeys"
            :placeholder="placeholder" :clearable="clearable" :filterable="filterable" :condition="condition" @clear="clearHandler">
        </dx-select>
        <dx-select v-if="type=='multiselect'" @change="change" v-model="model" :codeType="codeType" :disabled="disabled" @clear="clearHandler" :disabledKeys="disabledKeys"
            :placeholder="placeholder" :clearable="clearable" :filterable="filterable" :condition="condition" :multiple="checkAll" :multipleLimit="multipleLimit">
        </dx-select>
        <dx-checkbox v-if="type=='checkbox'" :multipleLimit="multipleLimit" @change="change" v-model="model" :codeType="codeType" @clear="clearHandler" :disabled="disabled" :disabledKeys="disabledKeys" :checkAll="true" :condition="condition"></dx-checkbox>
        <dx-radio v-if="type=='radio'" @change="change" v-model="model" :codeType="codeType" :disabled="disabled" :condition="condition" :disabledKeys="disabledKeys" @clear="clearHandler"></dx-radio>
        <dx-treeselect v-if="type=='treeselect'" @change="change" v-model="model" :codeType="codeType" :disabled="disabled" 
            :placeholder="placeholder" :clearable="clearable" :filterable="filterable" :condition="condition" :leafable="leafable" :width="width" @clear="clearHandler"></dx-treeselect>
        <dx-multitreeselect v-if="type=='multitreeselect'" @change="change" v-model="model" :codeType="codeType" :condition="condition"></dx-multitreeselect>
        <dx-upload v-if="type=='imageupload'" :limit="multipleLimit" @change="change" type="image" v-model="model" :disabled="disabled"></dx-upload>
        <dx-upload v-if="type=='fileupload'" :limit="multipleLimit" @change="change" type="file" v-model="model" :disabled="disabled"></dx-upload>

        <el-input v-if="type=='input'" :placeholder="placeholder" @change="change" v-model="model" :clearable="clearable" :disabled="disabled" @clear="clearHandler"></el-input>

        <el-input v-if="type=='textarea'" :placeholder="placeholder" @change="change" type="textarea" v-model="model" :clearable="clearable" :disabled="disabled" @clear="clearHandler"></el-input>
        <el-checkbox v-if="type=='simpleswitch'" @change="change" v-model="model" @clear="clearHandler" :disabledKeys="disabledKeys"></el-checkbox>
        <el-switch v-if="type=='switch'" @change="change" v-model="model"></el-switch>
        <el-date-picker v-if="type=='date'" @change="change" v-model="model" type="date" value-format="yyyy-MM-dd" :placeholder="placeholder" @clear="clearHandler" :clearable="clearable" :disabled="disabled"></el-date-picker>
        <el-date-picker v-if="type=='datetime'" @change="change" v-model="model" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" @clear="clearHandler" :placeholder="placeholder" :clearable="clearable" :disabled="disabled"></el-date-picker>

    </div>
</template>
<script>
import DxText from './dx-text'
import DxSelect from './dx-select'
import DxUpload from './dx-upload'
import DxCheckbox from './dx-checkbox'
import DxRadio from './dx-radio'
import DxTreeselect from './dx-treeselect'
import DxMultitreeselect from './dx-multitreeselect'
import Toolkit from '../../../assets/js/toolkit.js'
export default {
    props:{
        value : null,
        //dxText,dxSelect,dxCheckbox,dxRadio,dxTreeselect,input
        width: String,
        type : {type : String ,default : ''},
        codeType : {type : String},
        clearable : {type:Boolean,default:false},
        disabled : {type : Boolean,default : false},
        filterable : {type:Boolean,default:false},
        placeholder : {type:String ,default:'请选择'},
        condition : {type:Object,default:()=>{}},
        multipleLimit : {type:Number,default:0},
        checkAll : {type:Boolean ,default:true},
        leafable : { type: Boolean, default: false }, //是否可以只选择子叶
        disabledKeys : Array
    },
    computed : {
        model : {
            get(){
                let mValue = this.value;

                if(!Array.isArray(mValue) && (this.type=='multiselect' || this.type=='checkbox' || this.type=='multitreeselect')){//多选
                    mValue = this.value ? _.compact(this.value.split(",")) : [];
                }
                if(this.type=='simpleswitch'||this.type=='switch'){
                    mValue = this.value && (this.value=='true' || this.value=='1') ? true : false;
                }
                return mValue;
            },
            set(value){
                let mValue = (value && Array.isArray(value) ?  value.join(",") : value);
                mValue = mValue && (mValue===!!mValue) ? (mValue ? 1 : 0) : mValue;
                this.$emit('input', mValue); // key code 
            }
        }
    },
    methods : {
        change(val){

            this.$emit('change',val);
        },
        clearHandler(val){
            this.$emit('clear',val);
        }
    },
    data(){
        return {
        }
    },
    components : {
        DxText,
        DxSelect,
        DxCheckbox,
        DxRadio,
        DxTreeselect,
        DxUpload,
        DxMultitreeselect
    },
    mixins:[Toolkit]
}
</script>
<style scoped>
.dx-ctrl{
    line-height: 0;
}
</style>

